import React, { useState, useEffect } from 'react';
import styles from './index.module.scss'
import { Divider, Row, Col, Typography } from 'antd'
import ProductModel from '../../../../models/productModel'
import { withRouter, RouteComponentProps } from 'react-router-dom'

const { Text, Title } = Typography;

interface PropsInterface extends RouteComponentProps {
  aboutArr: Array<string>
}

function WebMeAboutMe(props: PropsInterface) {

  const [models, setModels] = useState<Array<ProductModel>>([]);

  const itemClick = function (model: ProductModel) {
    props.history.push(`/web/product/detail?id=${model._id}`)
  }

  useEffect(() => {
    ProductModel.getMeModels().then((models: any) => {
      setModels(models)
    }).catch(() => { })
  }, [])

  const AboutList = props.aboutArr.map((str: string, index: number) => {
    return [
      <Text key={index}>{str}</Text>,
      <br key={'br'} />
    ]
  })

  const ProductList = models.map((model: ProductModel) => {
    return (
      <li
        onClick={() => itemClick(model)}
        style={{ backgroundImage: `url(${model.pcMeIconUrl})` }}
        className={`${styles['item']} w-hover-float-shadow w-image-fit w-round w-pointer`}
        key={model._id}
      >
        <Title className={`w-flex-center w-round w-text-center ${styles['title']}`} level={4}>{model.name}</Title>
      </li>
    )
  })

  return (
    <div className={`${styles['web-me-about-me']}`}>
      <Divider>关于我</Divider>
      <Row gutter={16}>
        <Col span={12}>
          {AboutList}
        </Col>
        <Col span={12}>
          <ul className={styles['product-list']}>
            {ProductList}
          </ul>
        </Col>
      </Row>
    </div>
  );
}

export default withRouter<PropsInterface>(WebMeAboutMe);
